<template>
  <div id="draw-goods">
    <van-overlay :show="drawShow" v-if="type == 1">
      <div class="wrapper" @click.stop>
        <div class="block" :class="[this.fun.getPhoneEnv() == 3 ? 'pcStyle' : '']">
          <div class="top">
            <span class="name">恭喜抽中</span>
            <van-icon name="cross" class="close-icon" @click="close" />
          </div>
          <div class="goods-box">
            <div class="goods-pane" v-for="(item,index) in allDataList" :key="index" @click="goOrderdetail(item)">
              <div class="order-row">
                <div class="order-number">订单号: {{item.order_sn}}</div>
                <span class="status">{{item.status_name}}</span>
              </div>
              <div class="goods-row" v-for="(citem,cindex) in item.has_many_order_goods" :key="cindex">
                <img :src="citem.thumb" alt="">
                <div class="name">{{citem.title}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-overlay>

    <van-overlay :show="drawShow" v-if="type == 2">
      <div class="wrapper" @click.stop>
        <div class="block draw-block">
          <div class="top">
            <span class="name">恭喜开出</span>
            <van-icon name="cross" class="close-icon" @click="close" />
          </div>
          <div :class="allDataList.length > 1 ? 'img-pane' : 'img-pane-one'">
            <div class="img-row" v-for="(item,index) in allDataList" :key="index">
              <img :src="item.thumb" class="draw-img" >
              <img :src="item.level.level_img_src" alt="" class="level-img">
            </div>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import index_controller from "./index_controller.js";
export default index_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
::v-deep .van-overlay {
  z-index: 1000;
}

.pcStyle {
  width: 375px !important;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  .draw-block {
    width: 14.5rem !important;
  }

  .block {
    width: 85%;
    // height: 14.5rem;
    background: #fff;
    border-radius: 0.25rem;
    padding-bottom: 1.68rem;

    .img-pane {
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      padding: 0 0.5rem;
    }

    .img-pane-one {
      display: flex;
      justify-content: center;
    }

    .img-pane::after {
      content: '';
      width: 32%;
      height: 0;
      visibility: hidden;
    }

    .draw-img {
      width: 5.5rem;
      height: 5.5rem;
      border-radius: 0.25rem;
      margin: 1.28rem 0.5rem 0  0.5rem;
    }

    .top {
      margin: 0.9rem 0.9rem 0 0.9rem;
      line-height: 1;
      position: relative;

      .name {
        font-size: 0.9rem;
        font-weight: 500;
        color: #202020;
      }

      .close-icon {
        position: absolute;
        right: 0;
      }
    }

    .goods-box {
      margin: 0.85rem 0.48rem 0.63rem 0.48rem;

      .goods-pane {
        background: #f6f6f6;
        border-radius: 0.25rem;
        padding: 0.55rem 0.65rem 0.55rem 0.65rem;

        .order-row {
          display: flex;
          justify-content: space-between;

          .order-number {
            font-size: 0.7rem;
            font-weight: 400;
            color: #666;
          }

          .status {
            font-size: 0.7rem;
            font-weight: 400;
            color: #ed1818;
          }
        }

        .goods-row {
          display: flex;
          margin: 0.65rem 0 0 0;

          img {
            width: 3rem;
            height: 3rem;
            border-radius: 0.1rem;
            margin: 0;
          }

          .name {
            font-size: 0.75rem;
            font-weight: 400;
            color: #202020;
            line-height: 0.9rem;
            margin-left: 0.35rem;
            text-align: left;
          }
        }
      }
    }
  }
}

.img-row {
  position: relative;

  .level-img {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    position: absolute;
    bottom: -0.2rem;
    right: -0.25rem;
    border: 0.05rem solid #fd7383;
  }
}
</style>
